<template>
  <div class="login-container">
    <div class="login-wrapper">
      <!-- 背景装饰 -->
      <div class="background-decoration">
      </div>
      
      <!-- 登录卡片 -->
      <div class="login-card" :class="{ 'show-register': showRegister }">
        <!-- 登录表单 -->
        <div class="form-container login-form" :class="{ 'slide-left': showRegister }">
          <div class="form-header">
            <h2 class="form-title">欢迎回来</h2>
            <p class="form-subtitle">登录您的账户继续使用</p>
          </div>
          
          <form @submit.prevent="login" class="form">
            <div class="input-group">
              <div class="input-wrapper">
                <input 
                  type="text" 
                  v-model="loginForm.account" 
                  placeholder="请输入账号（至少4位）"
                  class="form-input"
                  maxlength="20"
                  required
                >
                <span class="input-icon">👤</span>
              </div>
              
              <div class="input-wrapper">
                <input 
                  type="password" 
                  v-model="loginForm.password" 
                  placeholder="请输入密码（至少6位，包含数字和字母）"
                  class="form-input"
                  maxlength="20"
                  required
                >
                <span class="input-icon">🔒</span>
              </div>
            </div>
            
            <div class="form-options">
              <a href="#" class="forgot-password">忘记密码？</a>
            </div>
            
            <button type="submit" class="submit-btn login-btn">
              <span>登录</span>
              <div class="btn-ripple"></div>
            </button>
          </form>
          
          <div class="form-footer">
            <p>还没有账户？ 
              <a href="#" @click.prevent="toggleForm" class="toggle-link">立即注册</a>
            </p>
          </div>
        </div>
        
        <!-- 注册表单 -->
        <div class="form-container register-form" :class="{ 'slide-right': !showRegister }">
          <div class="form-header">
            <h2 class="form-title">创建账户</h2>
            <p class="form-subtitle">注册新账户开始使用</p>
          </div>
          
          <form @submit.prevent="register" class="form">
            <div class="input-group">
              <div class="input-wrapper">
                <input 
                  type="text" 
                  v-model="registerForm.account" 
                  placeholder="请输入账号（至少4位）"
                  class="form-input"
                  maxlength="20"
                  required
                >
                <span class="input-icon">👤</span>
              </div>
              
              <div class="input-wrapper">
                <input 
                  type="password" 
                  v-model="registerForm.password" 
                  placeholder="请输入密码（至少6位，包含数字和字母）"
                  class="form-input"
                  maxlength="20"
                  required
                >
                <span class="input-icon">🔒</span>
              </div>
              
              <div class="input-wrapper">
                <input 
                  type="password" 
                  v-model="registerForm.checkPassword" 
                  placeholder="请再次输入密码"
                  class="form-input"
                  maxlength="20"
                  required
                >
                <span class="input-icon">🔐</span>
              </div>
            </div>
            
            <button type="submit" class="submit-btn register-btn">
              <span>注册</span>
              <div class="btn-ripple"></div>
            </button>
          </form>
          
          <div class="form-footer">
            <p>已有账户？ 
              <a href="#" @click.prevent="toggleForm" class="toggle-link">立即登录</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import router from "../router/index.js";
import { useUserStore } from "../stores/userStore.js";

const userStore = useUserStore();
const showRegister = ref(false);

const registerForm = reactive({
  account: '',
  password: '',
  checkPassword: ''
});

const loginForm = reactive({
  account: '',
  password: ''
});

const toggleForm = () => {
  showRegister.value = !showRegister.value;
};

// 验证账号
const validateAccount = (account) => {
  if (!account) {
    return '请输入账号';
  }
  if (account.length < 4) {
    return '账号不能少于4位';
  }
  return null;
};

// 验证密码
const validatePassword = (password) => {
  if (!password) {
    return '请输入密码';
  }
  if (password.length < 6) {
    return '密码不能少于6位';
  }
  
  const hasNumber = /\d/.test(password);
  const hasLetter = /[a-zA-Z]/.test(password);
  
  if (!(hasNumber && hasLetter)) {
    return '密码至少包含数字和字母两种字符';
  }
  
  return null;
};

async function register() {
  console.log('Registering with:', registerForm);
  
  // 验证账号
  const accountError = validateAccount(registerForm.account);
  if (accountError) {
    ElMessage({
      type: 'error',
      message: accountError,
      plain: true
    });
    return;
  }
  
  // 验证密码
  const passwordError = validatePassword(registerForm.password);
  if (passwordError) {
    ElMessage({
      type: 'error',
      message: passwordError,
      plain: true
    });
    return;
  }
  
  // 验证确认密码
  if (registerForm.password !== registerForm.checkPassword) {
    ElMessage({
      type: 'error',
      message: '两次输入的密码不一致',
      plain: true
    });
    return;
  }
  
  try {
    const resp = await userStore.userRegister(registerForm.account, registerForm.password, registerForm.checkPassword);
    
    console.log(resp);
    if (resp.code === 200) {
      ElNotification({
        title: '注册成功',
        message: '请重新登录',
        type: 'success',
        duration: 1000
      });
      // 立即跳转
      router.push('/login');
    } else {
      ElNotification({
        title: '注册失败',
        message: resp.msg,
        type: 'error',
      });
    }
  } catch (e) {
    ElMessage({
      type: 'error',
      message: '请求失败, 请稍后重试',
      plain: true
    });
  }
}

const login = async () => {
  console.log('Logging in with:', loginForm);
  
  // 验证账号
  const accountError = validateAccount(loginForm.account);
  if (accountError) {
    ElMessage({
      type: 'error',
      message: accountError,
      plain: true
    });
    return;
  }
  
  // 验证密码
  const passwordError = validatePassword(loginForm.password);
  if (passwordError) {
    ElMessage({
      type: 'error',
      message: passwordError,
      plain: true
    });
    return;
  }
  
  try {
    const resp = await userStore.userLogin(loginForm.account, loginForm.password);
    
    if (resp.code === 200) {
      ElNotification({
        title: '登录成功',
        message: '欢迎回来！',
        type: 'success',
        duration: 1000
      });
      // 立即跳转
      router.push('/');
    } else if(resp.code === 500 ){
      ElNotification({
        title: '登录失败',
        message: resp.msg,
        type: 'error',
      });
    }
  } catch (error) {
    console.error('登录请求失败:', error);
    
    ElMessage({
      type: 'error',
      message: '请求失败, 请稍后重试',
      plain: true
    });
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
  overflow: hidden;
}

.login-wrapper {
  position: relative;
  z-index: 10;
}

/* 背景装饰 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* 登录卡片 */
.login-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  width: 450px;
  min-height: 600px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 表单容器 */
.form-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.login-form {
  z-index: 2;
}

.register-form {
  z-index: 1;
}

.slide-left {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-right {
  transform: translateX(100%);
  opacity: 0;
}

.show-register .register-form {
  z-index: 2;
  transform: translateX(0);
  opacity: 1;
}

.show-register .login-form {
  z-index: 1;
}

/* 表单头部 */
.form-header {
  text-align: center;
  margin-bottom: 40px;
}

.form-title {
  font-size: 32px;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.form-subtitle {
  font-size: 16px;
  color: #718096;
  font-weight: 400;
}

/* 输入组 */
.input-group {
  margin-bottom: 30px;
}

.input-wrapper {
  position: relative;
  margin-bottom: 20px;
}

.form-input {
  width: 100%;
  padding: 16px 20px 16px 50px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
  background: #f7fafc;
  transition: all 0.3s ease;
  outline: none;
  color: #2d3748;
}

.form-input:focus {
  border-color: #667eea;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
}

.form-input::placeholder {
  color: #a0aec0;
}

.input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #a0aec0;
  transition: all 0.3s ease;
}

.form-input:focus + .input-icon {
  color: #667eea;
}

/* 表单选项 */
.form-options {
  margin-bottom: 30px;
  text-align: right;
}

.forgot-password {
  color: #667eea;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.forgot-password:hover {
  color: #764ba2;
  text-decoration: underline;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-bottom: 30px;
}

.login-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.register-btn {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
  color: white;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.submit-btn:active {
  transform: translateY(0);
}

.btn-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.submit-btn:active .btn-ripple {
  width: 300px;
  height: 300px;
}

/* 表单底部 */
.form-footer {
  text-align: center;
}

.form-footer p {
  color: #718096;
  font-size: 14px;
}

.toggle-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.toggle-link:hover {
  color: #764ba2;
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-card {
    width: 90vw;
    max-width: 400px;
    min-height: 500px;
  }
  
  .form-container {
    padding: 40px 30px;
  }
  
  .form-title {
    font-size: 28px;
  }
  
  .form-subtitle {
    font-size: 14px;
  }
  
  .form-input {
    padding: 14px 18px 14px 45px;
    font-size: 14px;
  }
  
  .submit-btn {
    padding: 14px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .login-card {
    width: 95vw;
    min-height: 450px;
  }
  
  .form-container {
    padding: 30px 20px;
  }
  

}
</style>
